<!--
 * @Author: zhang_wenjuan
 * @Date: 2021-05-17 14:27:59
 * @LastEditTime: 2021-07-31 15:54:52
 * @Description: 蓄电池抄录巡视专用
--><template>
  <div id="battery_page" class="copyPage">
    <!-- 顶部导航 -->
    <van-nav-bar title="蓄电池抄录" left-arrow @click-left="back" fixed>
      <van-icon class="rotate-icon" name="ellipsis" slot="right" size="20" @click="showMore=true" />
      <template slot="right">
        <div class="parent-circle">
          <div class="child-circle"></div>
        </div>
      </template>
    </van-nav-bar>
    <!-- 更多按钮弹窗 -->
    <!-- <div class="popupPage" v-if="showMore">
            <div class="mask" @click="showMore=false">
                <div class="popup">
                    <van-cell @click="itemClick(item.name)" v-for="(item,i) of moreButtons" :key="i" :value="item.name" />
                </div>
            </div>
    </div>-->
    <!-- 折叠面板 -->
    <van-collapse v-model="activeNames">
      <div style="display:flex;justify-content: space-between;padding: 0 10px;">
        <div style="display: flex;padding-left: 4px; margin-top: 3.5rem;">
          <span class="line_green"></span>
          <span>蓄电池</span>
        </div>
        <div class="sureBtn" @click="getCopyConfigList">
          <img src="../../images/u2360.png" style="width:25px;height:25px;">
          <span>同步数据</span>
        </div>
      </div>
      <van-collapse-item v-for="(item,i) in copyDataArr" :key="i" :title="item.name" :name="i">
        <div slot="title" style="display: flex;">
          <!-- <span class="line_green"></span> -->
          <span>{{item.name}}</span>
        </div>
        <div>
          <div v-for="(itemSon,index) in item.childConfig" :key="index">
            <div v-if="itemSon.copyName!='电阻'&&itemSon.copyName!='电压'" class="line-title font14">{{itemSon.copyName}}
            </div>
            <div v-if="itemSon.copyName!='电阻'&&itemSon.copyName!='电压'">
              <div class="line">
                <van-field placeholder="请输入" v-model="itemSon.copyValue" label="查看历史" @blur="rulesCon(itemSon)"
                  :type="itemSon.copyRangeMaxmum||itemSon.copyRangeMinimum?'number':''" input-align="right">
                  <div slot="label" @click="showHistory(itemSon,item,i,index)">
                    <span>查看历史</span>
                  </div>
                </van-field>
              </div>
            </div>
          </div>
        </div>
        <!-- 电压电阻表格区域 -->
        <div class="tablePart">
          <table>
            <tr>
              <th style="width:40px;">序号</th>
              <th>电压(V)</th>
              <th>电阻(mΩ)</th>
              <th></th>
            </tr>
            <tr v-for="(row,ii) of item.dz" :key="ii">
              <!-- 序号 -->
              <td>{{ii+1}}</td>
              <!-- 电压 -->
              <td>
                <van-field placeholder="请输入" @blur="rulesdy(row)" type="number" input-align="center" v-model="row.dy" />
              </td>
              <!-- 电阻 -->
              <td>
                <van-field placeholder="请输入" @blur="rulesdz(row)" type="number" input-align="center" v-model="row.dz" />
              </td>
              <!-- 查看历史 -->
              <td class="historyText" @click="showTableHistory(item,row,i,ii)">
                <span>查看历史</span>
              </td>
            </tr>
          </table>
        </div>
      </van-collapse-item>
    </van-collapse>
    <!-- 底部按钮区域 -->
    <div class="footPart">
      <van-button class="sureBtn" size="small" @click="sumbit()">完成</van-button>
    </div>
    <!-- 电磁节数抄录下拉弹窗 -->
    <van-popup v-model="show" style="height:45%;" position="bottom">
      <div class="selectUser">
        <van-nav-bar title="查看历史" @click-left="show=false" fixed>
          <!-- <template slot="left">
                        <div class="">
                            <div class="header_fs" >取消</div>
                        </div>
                    </template>
                    <template slot="right">
                        <div class="">
                            <div class="header_fs" >确定</div>
                        </div>
          </template>-->
        </van-nav-bar>
        <div class="listPart">
          <van-radio-group v-model="radio">
            <div class="historyBox">
              <div class="trBox">
                <span style="flex: 2.5 1 0%;
                                text-align: center;">时间</span>
                <span style="flex:2;text-align: center;">电压</span>
                <span style="flex:2;text-align: center;">电阻</span>
                <span style="flex:0.9;text-align: center;"></span>
              </div>
              <van-radio-group v-model="radio">
                <van-cell-group>
                  <van-cell class="trBox" v-for="(item,index) in dyDzHistoryData" :key="index" @click="radio = index">
                    <div class="trBox">
                      <span style="flex: 2.5 1 0%;
                                text-align: center;">{{item.date|filterDate}}</span>
                      <span style="flex:2;text-align: center;">{{item.dy|filterText}}</span>
                      <span style="flex:2;text-align: center;">{{item.dz|filterText}}</span>
                      <span style="flex:0.9;text-align: center;">
                        <van-radio :name="index" /></span>
                    </div>
                  </van-cell>
                </van-cell-group>
              </van-radio-group>
            </div>
            </van-cell-group>
          </van-radio-group>
          <div class="btnBox">
            <div class="flex">
              <div class="noPass" @click="cancel">取消</div>
              <div class="pass" @click="dzDyHistorySure">确定</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 普通数抄录下拉弹窗 -->
    <van-popup v-model="show1" style="height:45%;" position="bottom">
      <div class="selectUser">
        <van-nav-bar title="查看历史" @click-left="show=false" fixed>
          <!-- <template slot="left">
                        <div class="">
                            <div class="header_fs" >取消</div>
                        </div>
                    </template>
                    <template slot="right">
                        <div class="">
                            <div class="header_fs" >确定</div>
                        </div>
          </template>-->
        </van-nav-bar>
        <div class="listPart">
          <div class="historyBox">
            <div class="trBox">
              <span style="margin-left: 3rem;">时间</span>
              <span style="margin-left: 2rem;">{{copyName}}</span>
              <span> </span>
            </div>
            <van-radio-group v-model="radio">
              <van-cell-group>
                <van-cell class="trBox" clickable v-for="(item,i) in historyData" :key="i" @click="radio = i">
                  <div class="trBox">
                    <span>{{item.createTime|filterDate}}</span>
                    <span>{{item.copyValue}}</span>
                    <van-radio :name="i" />
                  </div>

                </van-cell>
              </van-cell-group>
            </van-radio-group>
          </div>
          <div class="btnBox">
            <div class="flex">
              <div class="noPass" @click="cancel">取消</div>
              <div class="pass" @click="historySure">确定</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 目录下拉弹窗 -->
    <van-popup v-model="menu" :style="{ height: '30%' }" position="bottom">
      <div class="selectUser">
        <van-nav-bar title="目录" fixed></van-nav-bar>
        <div class="listPart">
          <div class="meunBox">
            <div class="trMeunBox" v-for="(item,i) in copyDataArr" :key="i">
              <span>{{item.name}}</span>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script type="text/javascript">
  import Utils from "@/utils/util";
  import {
    submitCopyData,
    getChildConfigList,
    getDeviceByType,
    getHistoryIInfo,
    getCopyValue,
    addCopyRecord,
    getCopyConfigList
  } from "../../api/dataCopy";
  export default {
    name: "batteryCopy",
    components: {},
    data() {
      return {
        menu: false,
        taskInfo: {}, // 巡视任务信息
        type: null, // 区分从哪个页面跳转过来   不为空  则代表从全面巡视过来
        copyConfigId: "", // 抄录项id
        deviceTypeName: "", // 设备类型名称
        deviceTypeId: "", // 设备类型id
        substationId: "", // 变电站id
        substationName: "", // 变电站名称
        copyDataArr: [], // 抄录数据
        historyData: [], // 历史数据
        dyDzHistoryData: [], // 电压电阻历史数据
        // dzHistoryData: [],// 电阻历史数据
        itemIndex: null, // 设备索引
        itemSonIndex: null, // 抄录项索引
        tableIndex: null, // 抄录项索引
        // 是否显示历史数据弹窗
        show: false,
        show1: false,
        text: "",
        radio: 0,
        radioCopy: null,
        historyCopyCode: "",//记上一次查看历史的code
        copyName: "",
        dyHistoryIInfo: [], // 电压历史数据
        dzHistoryIInfo: [], // 电阻历史数据
        // 激活的折叠面板选项
        activeNames: ["1"],
        //是否展示更多按钮
        showMore: false,
        userInfo: JSON.parse(localStorage.getItem("userInfo")),
        // 抄录类型
        moreButtons: [
          { name: "同步数据" },
          { name: "间隔目录" },
          { name: "二维码" },
          { name: "RFID" }
        ],
        // 节数抄录
        arr: [
          { dy: "", dz: "", },
          { dy: "", dz: "", },
          { dy: "", dz: "", },
          { dy: "", dz: "", },
        ],
        // 提交的数据
        submitCopyData: []
      };
    },
    created() {
      // // if (Utils.baseUtil.isEmptyString(this.$route.params.type)) {
      //     this.deviceTypeName = this.$route.params.deviceTypeName
      //     this.deviceTypeId = this.$route.params.deviceTypeId
      //     this.substationId = this.$route.params.substationId
      //     this.copyConfigId = this.$route.params.copyConfigId
      //     this.substationName = this.$route.params.substationName
      //     this.getDeviceByType()
      // // } else {
      //     // 全面巡视路由跳过来的
      this.taskInfo = this.$route.params.taskInfo;
      this.type = this.$route.params.type;
      this.deviceTypeName = this.$route.params.deviceInfo.deviceTypeName;
      this.deviceTypeId = this.$route.params.deviceInfo.deviceTypeId;
      this.substationId = this.$route.params.taskInfo.substationId;
      this.substationName = this.$route.params.taskInfo.substationName;
      var copydata = {
        code: this.$route.params.deviceInfo.deviceId,
        name: this.$route.params.deviceInfo.deviceName,
        dz: [],
        childConfig: []
      };
      this.copyDataArr.push(copydata);
      // 通过变电站和设备类型获取抄录项
      this.getCopyConfigList();

      // }
    },
    mounted() { },
    methods: {
      /**
       * 返回
       */
      back() {
        this.$router.push({
          name: "executeIndex",
          params: {
            taskInfo: this.taskInfo
          }
        });
      },
      /**
       * @description: 更多
       * @param {*}
       * @return {*}
       */
      itemClick(name) {
        if (name == "目录") {
          this.menu = true;
        } else {
          this.getCopyConfigList();
        }
      },
      /**
       * 提交
       */
      sumbit() {
        var self = this;
        // 抽离电压电阻
        var deviceDataList = [];
        for (let i = 0; i < self.copyDataArr.length; i++) {
          var dzValue = []; //电压
          var dyValue = []; // 内阻
          for (let o = 0; o < self.copyDataArr[i].dz.length; o++) {
            dzValue.push(self.copyDataArr[i].dz[o].dz);
            dyValue.push(self.copyDataArr[i].dz[o].dy);
          }
          // 拼接抄录值
          self.copyDataArr[i].childConfig[
            self.copyDataArr[i].childConfig.length - 1
          ].copyValue = dyValue.join(",");
          self.copyDataArr[i].childConfig[
            self.copyDataArr[i].childConfig.length - 2
          ].copyValue = dzValue.join(",");
          for (let j = 0; j < self.copyDataArr[i].childConfig.length; j++) {
            self.copyDataArr[i].childConfig[j].deviceId =
              self.copyDataArr[i].code;
            self.copyDataArr[i].childConfig[j].deviceName =
              self.copyDataArr[i].name;
            deviceDataList.push(self.copyDataArr[i].childConfig[j]);
          }
        }
        let params = {
          copyPerson: self.userInfo.userName,
          copyPersonId: self.userInfo.userId,
          copyTime: new Date(),
          deviceDataList: deviceDataList,
          // "deviceInfoList": self.selectDeviceList,
          deviceType: self.deviceTypeId,
          deviceTypeName: self.deviceTypeName,
          roleCode: "",
          substationId: self.substationId,
          substationName: self.substationName,
          userId: self.userInfo.userId
        };
        self.$toast.loading({
          duration: 0, //展示时长 0不会消失
          message: "新增抄录中...",
          forbidClick: true, //是否禁止背景点击
          overlay: true //是否显示背景遮罩层
        });
        addCopyRecord(params)
          .then(res => {
            if (res.success) {
              self.$Toast.success("抄录成功");
              self.back();
            } else {
              self.$Toast("抄录失败");
            }
            self.$Toast.clear();
          })
          .catch(err => {
            self.$Toast("抄录失败");
            self.$Toast.clear();
          });
      },

      /**
       * 查看表格历史数据
       */
      showTableHistory(item, row, index, i) {
        if (!Utils.baseUtil.isEmptyString(this.historyCopyCode)) {
          if (this.historyCopyCode != row.dycode) {
            this.radio = 0
            this.historyCopyCode = row.dycode
          }
        }
        this.itemIndex = null; // 设备索引
        this.itemSonIndex = null; // 抄录项索引
        this.tableIndex = null; // 抄录项索引
        var self = this;
        self.dyDzHistoryData = [];
        // 获取电压历史数据
        var params = {
          copyCode: row.dycode,
          roleCode: "",
          deviceId: item.code,
          userId: this.userInfo.userId
        };
        getHistoryIInfo(params)
          .then(res => {
            if (res.success) {
              if (res.data.length > 0) {
                self.dyHistoryIInfo = res.data;

                // 获取电阻历史数据
                var params = {
                  copyCode: row.dzcode,
                  roleCode: "",
                  deviceId: item.code,
                  userId: this.userInfo.userId
                };
                getHistoryIInfo(params)
                  .then(res => {
                    if (res.success) {
                      if (res.data.length > 0) {
                        self.dzHistoryIInfo = res.data;
                        self.itemIndex = index;
                        self.tableIndex = i;
                        // 处理历史数据
                        var obj = {};
                        for (let j = 0; j < self.dzHistoryIInfo.length; j++) {
                          self.dyDzHistoryData.push({
                            date: self.dzHistoryIInfo[j].createTime,
                            dz: self.dzHistoryIInfo[j].copyValue.split(",")[i],
                            dy: self.dyHistoryIInfo[j].copyValue.split(",")[i]
                          });
                        }
                        console.log(self.dyDzHistoryData);
                      } else {
                        self.$Toast("没有历史数据");
                      }
                    } else {
                      self.$Toast("查看历史失败");
                    }
                  })
                  .catch(err => {
                    self.$Toast("查看历史失败");
                  });
              } else {
                self.$Toast("没有历史数据");
              }
            } else {
              self.$Toast("查看历史失败");
            }
          })
          .catch(err => {
            self.$Toast("查看历史失败");
          });
        this.show = true;
      },

      // 获取间隔树
      getCopyConfigList() {
        var self = this;
        // 请求参数
        var params = {
          deviceType: this.deviceTypeId,
          pageNum: 1,
          pageSize: 1,
          roleCode: "",
          substationId: this.substationId,
          userId: this.userInfo.userId
        };
        getCopyConfigList(params)
          .then(res => {
            // 蓄电池组

            var paramsSon = {
              copyItemConfigId: res.data[0].copyConfigId,
              pageNum: 1,
              pageSize: 10000,
              roleCode: "",
              userId: self.userInfo.userId
            };
            // 获取子项
            getChildConfigList(paramsSon).then(resSon => {
              for (let k = 0; k < self.copyDataArr.length; k++) {
                self.copyDataArr[k].childConfig = JSON.parse(
                  JSON.stringify(resSon.data)
                );
              }
              var getValue = {};
              //获取上一次的抄录值
              for (let a = 0; a < self.copyDataArr.length; a++) {
                for (let l = 0; l < self.copyDataArr[a].childConfig.length; l++) {
                  getCopyValue({
                    copyCode: self.copyDataArr[a].childConfig[l].copyCode,
                    deviceId: self.copyDataArr[a].code,
                    roleCode: "",
                    userId: self.userInfo.userId
                  }).then(getV => {
                    console.log(getV);
                    self.copyDataArr[a].childConfig[l].copyValue =
                      getV.data.copyValue;
                    if (getV.data.copyName == "电阻") {
                      console.log(11111);
                      self.copyDataArr[a].dzarr = getV.data.copyValue.split(",");
                      self.copyDataArr[a].dzcode = getV.data.copyCode;
                    }
                    if (getV.data.copyName == "电压") {
                      self.copyDataArr[a].dyarr = getV.data.copyValue.split(",");
                      self.copyDataArr[a].dycode = getV.data.copyCode;
                    }
                    console.log(self.copyDataArr[a]);
                  });
                }
              }
              setTimeout(() => {
                // 组装节数上一次抄录数据
                for (let v = 0; v < self.copyDataArr.length; v++) {
                  var dz = [];
                  console.log(
                    !Utils.baseUtil.isEmptyString(self.copyDataArr[v].dzarr)
                  );
                  if (!Utils.baseUtil.isEmptyString(self.copyDataArr[v].dzarr)) {
                    console.log("==========================================");
                    console.log(self.copyDataArr[v].dzarr);
                    if (self.copyDataArr[v].dzarr.length > 0) {
                      console.log(222323322233);
                      for (
                        let vv = 0;
                        vv < self.copyDataArr[v].dzarr.length;
                        vv++
                      ) {
                        // self.$nextTick(()=>{
                        dz.push({
                          dz: self.copyDataArr[v].dzarr[vv],
                          dy: self.copyDataArr[v].dyarr[vv],
                          dycode: self.copyDataArr[v].dycode,
                          dzcode: self.copyDataArr[v].dzcode
                        });
                        // })
                      }
                      // self.$nextTick(() => {
                      //     self.arr = dz
                      //     console.log(self.arr);
                      // })
                      self.$set(self.copyDataArr[v], "dz", dz);
                      // self.copyDataArr[a].dz = JSON.parse(JSON.stringify(dz))
                    } else {
                      self.$set(self.copyDataArr[v], "dz", self.arr);
                    }
                  } else {
                    self.$set(self.copyDataArr[v], "dz", self.arr);
                  }
                }
              }, 500);
              console.log(self.arr);
            });
          })
          .catch(err => {
            console.log(err);
            self.$Toast("请求失败!");
          });
      },

      /**
       * @description: 抄录项查看历史
       * @param {*} val
       * @return {*}
       */
      showHistory(val, item, i, j) {
        if (this.historyCopyCode != val.copyCode) {
          this.radio = 0
          this.historyCopyCode = val.copyCode
        }
        this.tableIndex = null; // 抄录项索引
        this.itemIndex = i;
        this.itemSonIndex = j;
        this.historyData = [];
        this.copyName = val.copyName;
        var self = this;
        var params = {
          copyCode: val.copyCode,
          roleCode: "",
          deviceId: item.code,
          userId: this.userInfo.userId
        };
        getHistoryIInfo(params)
          .then(res => {
            if (res.success) {
              if (res.data.length > 0) {
                var HistoryIInfo = res.data;
                for (let i = 0; i < HistoryIInfo.length; i++) {
                  // 判断抄录值是否为空
                  console.log();
                  if (!Utils.baseUtil.isEmptyString(HistoryIInfo[i].copyValue)) {
                    self.historyData.push(HistoryIInfo[i]);
                  }
                }
                if (self.historyData.length > 0) {
                  // 默认使用第一条历史数据
                  if (Utils.baseUtil.isEmptyString(self.radio)) {
                    self.radio = 0;
                  }
                  // if (type == '1') {
                  self.show1 = true;
                  // } else {
                  //     self.show = true
                  // }
                } else {
                  self.$Toast("没有历史数据");
                }
              } else {
                self.$Toast("没有历史数据");
              }
            } else {
              self.$Toast("查看历史失败");
            }
          })
          .catch(err => {
            self.$Toast("查看历史失败");
          });
      },

      /**
       * @description: 普通抄录项查看历史确认
       * @param {*}
       * @return {*}
       */
      historySure() {
        this.copyDataArr[this.itemIndex].childConfig[
          this.itemSonIndex
        ].copyValue = this.historyData[this.radio].copyValue;
        this.show1 = false;
        this.radioCopy = this.radio
      },

      /**
       * @description: 蓄电池选择历史数据确认
       * @param {*}
       * @return {*}
       */
      dzDyHistorySure() {
        this.copyDataArr[this.itemIndex].dz[
          this.tableIndex
        ].dy = this.dyDzHistoryData[this.radio].dy;
        this.copyDataArr[this.itemIndex].dz[
          this.tableIndex
        ].dz = this.dyDzHistoryData[this.radio].dz;
        this.show = false;
        this.itemIndex = null; // 设备索引
        this.itemSonIndex = null; // 抄录项索引
        this.tableIndex = null; // 抄录项索引
        this.radioCopy = this.radio
      },

      /**
       * @description: 选择历史数据取消
       * @param {*}
       * @return {*}
       */
      cancel() {
        this.show = false
        this.show1 = false
        this.radio = this.radioCopy
      },

      /**
      * @description: 输入校验
      * @param {*}
      * @return {*}
      */
      rulesCon(itemSon) {
        console.log(itemSon);
        // 如果不为空
        console.log(!Utils.baseUtil.isEmptyString(itemSon.copyValue));
        if (!Utils.baseUtil.isEmptyString(itemSon.copyValue)) {
          // 如果为空  就不需要限制输入类型
          if (!Utils.baseUtil.isEmptyString(itemSon.copyRangeMaxmum)) {
            // 判断是否是数字且不为nan
            if (typeof Number(itemSon.copyRangeMaxmum) == "number" && !isNaN(Number(itemSon.copyRangeMaxmum))) {
              //最大值验证 
              if (typeof Number(itemSon.copyValue) == "number" && !isNaN(Number(itemSon.copyValue))) {
                // 转换输入值为数字
                if (Number(itemSon.copyValue) > Number(itemSon.copyRangeMaxmum)) {
                  this.$Toast('最大值为：' + itemSon.copyRangeMaxmum)
                  itemSon.copyValue = itemSon.copyRangeMaxmum// 默认恢复最大值
                }
              }
            }
          }
          if (!Utils.baseUtil.isEmptyString(itemSon.copyRangeMinimum)) {
            // 判断是否是数字且不为nan
            if (typeof Number(itemSon.copyRangeMinimum) == "number" && !isNaN(Number(itemSon.copyRangeMinimum))) {
              //最小值验证 
              if (typeof Number(itemSon.copyValue) == "number" && !isNaN(Number(itemSon.copyValue))) {
                // 转换输入值为数字
                if (Number(itemSon.copyValue) < Number(itemSon.copyRangeMinimum)) {
                  this.$Toast('最小值为:' + itemSon.copyRangeMinimum)
                  itemSon.copyValue = itemSon.copyRangeMinimum// 默认恢复最小值
                }
              }
            }
          }
        }
        this.copyDataArr = JSON.parse(JSON.stringify(this.copyDataArr))
      },

      /**
      * @description: 电压验证
      * @param {*} son
      * @return {*}
      */
      rulesdy(son) {
        if (!Utils.baseUtil.isEmptyString(son.dy)) {
          if (son.dy > 100 && typeof son.dy != 'number') {
            this.$Toast("最大值为100")
            son.dy = 100
          }
          if (son.dy < 1 && typeof son.dy != 'number') {
            this.$Toast("最小值为1")
            son.dy = 1
          }
        }
      },
      /**
       * @description: 电阻验证
       * @param {*} son
       * @return {*}
       */
      rulesdz(son) {
        if (!Utils.baseUtil.isEmptyString(son.dz)) {
          if (son.dz > 100 && typeof son.dz != 'number') {
            if (son.dz > 100 && typeof son.dz != 'number') {
              this.$Toast("最大值为100")
              son.dz = 100
            }
          }
          if (son.dz < 1 && typeof son.dz != 'number') {
            this.$Toast("最小值为1")
            son.dz = 1
          }
        }
      },

    },
    watch: {
      taskList() { }
    },
    filters: {
      filterDate(val) {
        return Utils.DateUtil.getFormatDateByLong(val, "yyyy-MM-dd hh:mm");
      },
      filterText(val) {
        if (Utils.baseUtil.isEmptyString(val)) {
          return "无";
        } else {
          return val;
        }
      }
    }
  };
</script>
<style scoped>
  #battery_page {
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    background: #fff;
    /* margin-top: 46px; */
    overflow-y: auto;
  }

  .van-nav-bar {
    background: #17b49b;
  }

  .van-nav-bar /deep/ .van-icon {
    color: #fff;
    font-size: 22px;
  }

  .van-nav-bar /deep/ .van-nav-bar__text {
    color: #fff;
    font-size: 18px;
  }

  .van-nav-bar /deep/ .van-button {
    background: #fff;
    color: #17b49b;
    width: 60px;
    border-radius: 4px;
    margin-right: 10px;
  }

  .popup {
    position: absolute;
    top: 60px;
    right: 10px;
    width: 150px;
    height: 84px;
  }

  .popup .van-cell {
    background: #17b49b;
  }

  .popup .van-cell__value--alone {
    color: #fff;
  }

  /* 更多弹窗按钮样式 */
  .popupPage {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 100%;
    text-align: left;
  }

  .mask {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
  }

  /* 折叠面板区域 */
  #battery_page /deep/ .van-field__label {
    width: 130px;
  }

  .line {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .line .unit {
    width: 20px;
  }

  .van-collapse /deep/ .van-button--plain.van-button--info {
    color: #17b49b;
  }

  .van-button--info {
    border: 1px solid #17b49b;
  }

  /* 表格区域 */
  .tablePart {
    margin-top: 20px;
  }

  .tablePart table {
    width: 100%;
    border-top: 1px solid #efefef;
    border-left: 1px solid #efefef;
    /* 去掉单元格间隙 */
    border-spacing: 0;
  }

  .tablePart table th {
    height: 30px;
    line-height: 30px;
    padding: 0;
    box-sizing: border-box;
    /* background: #17b49b;
    color: #fff; */
    border-bottom: 1px solid #efefef;
    border-right: 1px solid #efefef;
  }

  .tablePart table td {
    height: 40px;
    text-align: center;
    box-sizing: border-box;
    border-bottom: 1px solid #efefef;
    border-right: 1px solid #efefef;
  }

  .tablePart table /deep/ .van-cell {
    /* 解决带input输入框的td不显示边框问题 */
    width: 99%;
    height: 40px;
  }

  .historyText span {
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 25px;
    background: #1481ee;
    color: white;
    border-radius: 3px;
  }

  /* 查看历史弹窗 */
  /* 查看历史弹窗 */
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #f5f6fa !important;
  }

  .block {
    width: 100%;
    height: 120px;
    padding: 20px;
    border-radius: 5px;
  }

  .historyItem {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ececec;
  }

  /* 底部按钮区域 */
  .footPart {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #efefef;
    background: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footPart .van-button {
    width: 100px;
    margin: 0 10px;
    border-radius: 5px;
  }

  .sureBtn {
    background: #17b49b;
    color: #fff;
  }

  .van-nav-bar--fixed {
    position: unset;
  }

  .historyBox {
    width: 100%;
    /* max-height: 217px; */
    height: 20.6rem;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 3rem;
  }

  .meunBox {
    width: 100%;
    /* max-height: 217px; */
    height: 12.6rem;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 3rem;
  }

  .trBox {
    width: 95%;
    margin: 0 auto;
    height: 3rem;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .trMeunBox {
    width: 100%;
    margin: 0 auto;
    height: 3rem;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #ccc;
  }

  .copyName {
    display: inline-block;
    width: 40%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .historyDate {
    display: inline-block;
    width: 20%;
    text-align: center;
  }

  .btnBox {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-bottom: 1rem;
    width: 100vw;
  }

  .flex {
    width: 40%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .flex>div {
    width: 6rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 8px;
  }

  .noPass {
    background-color: #fff;
    text-align: center;
    color: #000;
    margin-right: 0.5rem;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(51, 51, 51, 1);
  }

  .pass {
    color: #fff;
    margin-left: 0.5rem;
    background: inherit;
    background-color: rgb(24, 181, 156);
    border: none;
  }

  .sureBtn {
    background: #17b49b;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    margin-top: 2.5rem;
    display: flex;
    width: 110px;
    justify-content: space-around;
  }

  .van-col {
    font-size: 1rem;
    color: #333333;
    text-align: center;
    padding: 10px;
  }

  .van-row {
    margin: 0 16px 8px 16px;
    border-bottom: 1px solid #ccc;
  }

  [class*=van-hairline]::after {
    border: none;
  }
</style>